<!-- 门店订单 -->
<template>
	<view class="pages relative">
		<view class="msck" v-if="filterShow"></view>
		<!-- 顶部 -->
		<view class="pages-top bgc-w boxShadow">
			<!-- 顶部导航 -->
			<g-pages-tab class="pages-tab bgc-w" :list="pagesTab" :index='ptIndex' @change="changePagesTab" />
			<!-- 搜索框位置&&筛选按钮 -->
			<view class="pages-top-item row-box">
				<p-search style="height: 72rpx;flex: 1;" />
				<view class="fcc ml-20" @click="filterShow=!filterShow">
					<image src="/static/images/common/icon-1.png" mode="scaleToFill" class="filter-icon"></image>
					<text class="fc-3 fs-sm">筛选</text>
				</view>
			</view>

			<!-- 筛选框下拉框 -->
			<view class="filter-popup-box static bgc-w p-20" v-if="filterShow">
				<view class="filter-popup-item relative  mt-20">
					<view class="fc-3 fw-6 mb-10">
						按时间选择
					</view>
					<p-time-tab :list="timeList" :index='timeIndex' type='grid' bgcolor='#F4F4F4' />
				</view>
				<view class="row-box mt-20">
					<view class="btn-info " style="font-size: 28rpx;" @click="onCancel">
						清除
					</view>
					<view class="btn-ac " style="font-size: 28rpx;">
						确定
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="pages-list-box relative pt-20" v-if="pagesLists&&pagesLists.length">
			<deliveryItem v-for="(item,index) in pagesLists" :key='index' @confirm="confirm"
				@details="$fn.toPages('/pages/delivery/details')">
			</deliveryItem>
		</view>

		<view class="pages-list-box relative" v-else>
			<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	import deliveryItem from './components/deliveryItem.vue'
	export default {
		components: {
			deliveryItem
		},
		data() {
			return {
				// 筛选框
				filterShow: false,
				// 筛选时间索引
				timeIndex: 0,
				// 筛选服务索引
				filterIndex: 0,
				// 门店订单状态索引
				stateIndex: 0,
				// 门店订单来源
				ptIndex: 0,
				//数据
				pagesLists: [1, 1, 1],
			};
		},
		onLoad() {},
		methods: {

			// 切换顶部导航索引
			changePagesTab(index) {
				this.ptIndex = index
			},
			//切换状态
			changeState(index) {
				this.stateIndex = index
			},
			// 清除筛选
			onCancel() {
				this.filterShow = false
			},

			// 提醒使用
			confirm() {},
		},
		computed: {
			timeList() {
				return [{
					title: '全部'
				}, {
					title: '今日'
				}, {
					title: '昨日'
				}, {
					title: '本周'
				}, {
					title: '本月'
				}, {
					title: '近半年'
				}, {
					title: '近一年'
				}, {
					title: '自定义'
				}, ]
			},
			pagesTab() {
				return [{
					title: '全部',
				}, {
					title: '待配送'
				}, {
					title: '配送中'
				}, {
					title: '已送达'
				}, ]
			},

		}
	}
</script>

<style lang="scss" scoped>
	.static {
		position: static;
	}

	.pages-top {
		width: 750rpx;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		z-index: 3;

		.pages-top-item {
			height: 100rpx;
			margin: 0 auto;
		}

		.pages-tab {
			height: 96rpx;
		}
	}

	.filter-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.filter-popup-box {
		// position: relative;
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;

		.btn-info {
			width: 300rpx;
			line-height: 80rpx;
		}

		.btn-ac {
			width: 300rpx;
			line-height: 80rpx;
		}

	}


	.msck {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pages-list-box {
		z-index: 1;
	}
</style>